<template>
  <div class="data-query">
    <div class="nav">
      <div class="nav-warp">
        <div class="btn-left">
          <nuxt-link to="/">
            <div class="data-serch">
              首页
            </div>
          </nuxt-link>
          <div class="home">
            数据查询
          </div>
        </div>
        <div class="btn-right">
          <div class="to-login">
            <nuxt-link to="/login">
              <span style="color: #ffffff"
                >登录&nbsp; <span style="color: #666">|</span></span
              >
              <span style="color: #fe721d">&nbsp; 注册</span></nuxt-link
            >
          </div>
        </div>
      </div>
    </div>
    <div class="banner">
      <div class="search">
        <input
          type="text"
          placeholder="请输入门锁品牌/产地/厂家/型号/离合方式"
          class="el-input"
        />
        <button class="button">搜索</button>
      </div>
    </div>
    <div class="classification">
      <p class="title">
        所有分类
        <el-button @click="onClickClear" size="mini" class="clearBtn"
          >清空</el-button
        >
      </p>
      <div class="sub">
        <div class="sub-title">
          <p
            v-for="(item, index) in cate"
            :key="index"
            @click="getSearchData(item.code)"
          >
            {{ item.name }}
          </p>
        </div>
        <div class="arrow">
          <p v-for="(item, index) in cate" :key="index">
            <i class="el-icon-arrow-right"></i>
          </p>
        </div>
        <div class="cate_detail">
          <div class="cate-detail-item">
            <span
              v-for="(item, index) in lock_brand"
              :key="index"
              @click="onClickBrand(item, 'lock_brand', index)"
              :class="{ activeCss: lockBrandIsactive.indexOf(index) > -1 }"
              >{{ item.dictValue }}</span
            >
          </div>
          <div class="cate-detail-item">
            <span
              v-for="(item, index) in openlock_type"
              :key="index"
              @click="onClickBrand(item, 'openlock_type')"
              >{{ item.dictValue }}</span
            >
          </div>
          <div class="cate-detail-item">
            <span
              v-for="(item, index) in net_app"
              :key="index"
              @click="onClickBrand(item, 'net_app')"
              >{{ item.dictValue }}</span
            >
          </div>
          <div class="cate-detail-item">
            <span
              v-for="(item, index) in mark_time"
              :key="index"
              @click="onClickBrand(item, 'mark_time', index)"
              :class="[index == marketTimeAcitve ? 'activeCss' : '']"
              >{{ item.dictValue }}</span
            >
          </div>
          <div class="cate-detail-item">
            <span
              v-for="(item, index) in place"
              :key="index"
              @click="onClickBrand(item, 'place', index)"
              :class="[index == placeAcitve ? 'activeCss' : '']"
              >{{ item.dictValue }}</span
            >
          </div>
          <div class="cate-detail-item">
            <span
              v-for="(item, index) in made_enterprise"
              :key="index"
              @click="onClickBrand(item, 'made_enterprise')"
              >{{ item.dictValue }}</span
            >
          </div>
          <div class="cate-detail-item">
            <span
              v-for="(item, index) in insert_core_type"
              :key="index"
              @click="onClickBrand(item, 'insert_core_type')"
              >{{ item.dictValue }}</span
            >
          </div>
          <div class="cate-detail-item">
            <span
              v-for="(item, index) in clutch_type"
              :key="index"
              @click="onClickBrand(item, 'clutch_type')"
              >{{ item.dictValue }}</span
            >
          </div>
          <div class="cate-detail-item">
            <span
              v-for="(item, index) in main_material"
              :key="index"
              @click="onClickBrand(item, 'main_material')"
              >{{ item.dictValue }}</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="goods-list">
      <ul class="goods-warp">
        <li
          v-for="(item, index) in listData"
          :key="index"
          class="item"
          @click="goToDetail(item)"
        >
          <img :src="item.productImg" alt="" class="img" />
          <div class="label">
            <el-button type="primary" class="btn-desc" :title="item.lockBrandName">{{ item.lockBrandName }}</el-button>
            <el-button type="primary" class="btn-desc" :title="item.lockType">{{ item.lockType }}</el-button>
            <!-- <el-button type="primary">{{ item.clutchType }}</el-button> -->
          </div>
          <div class="addr">
            <div class="addr-item">
              <label for="">产地：</label>
              <span>{{ item.placeName }}</span>
            </div>

          </div>
          <div class="addr">
           <div class="addr-item">
              <label for="">上市时间： </label>
              <span>{{ item.marketTimeName }}</span>
            </div>
          </div>

          <div class="mode">
            <label for="">报警方式： </label>
            <span>{{ item.alarmMethod }}</span>
          </div>
          <div class="tips">
            {{ getopenlockType(item.openLockMethod) }}
          </div>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <el-pagination
        :pageSize="listSearch.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :currentPage="listSearch.current"
        :pageSizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
    <pageFooter></pageFooter>
  </div>
</template>

<script>
import pageFooter from "../components/footer";
export default {
  components: {
    pageFooter
  },
  data() {
    return {
      lockBrandIsactive: [],
      marketTimeAcitve: null,
      placeAcitve: null,
      cate: [
        { name: "品牌", code: "lock_brand" },
        { name: "开锁方式", code: "openlock_type" },
        { name: "联网APP", code: "net_app" },
        { name: "上市时间", code: "mark_time" },
        { name: "产地", code: "place" },
        { name: "生产企业", code: "made_enterprise" },
        { name: "插芯方式", code: "insert_core_type" },
        { name: "离合方式", code: "clutch_type" },
        { name: "主要材质", code: "main_material" }
      ],
      listSearch: {
        current: 1,
        size: 10,
        lockBrand: "",
        place: "",
        marketTime: "",
        stopTime: "",
        electronType: "",
        lockNetWhether: "",
        autoType: "",
        witLockType: "",
        userType: ""
      },
      listData: [],
      lock_brand: [],
      openlock_type: [],
      net_app: [],
      mark_time: [],
      place: [],
      made_enterprise: [],
      insert_core_type: [],
      clutch_type: [],
      main_material: [],
      total: 0,
      arr: []
    };
  },
  mounted() {
    this.getList();
    this.cate.forEach(item => {
      this.getSearchData(item.code);
    });
  },
  methods: {
    onClickClear() {
      this.listSearch = {
        current: 1,
        size: 10,
        lockBrand: "",
        place: "",
        marketTime: "",
        stopTime: "",
        electronType: "",
        lockNetWhether: "",
        autoType: "",
        witLockType: "",
        userType: ""
      };
      this.lockBrandIsactive = [];
      this.marketTimeAcitve = null;
      this.placeAcitve = null;
      this.getList();
    },
    onClickBrand(e, type, index) {
      if (type == "lock_brand") {
        let arrIndex = this.lockBrandIsactive.indexOf(index);
        let arrKey = this.lockBrandIsactive.indexOf(e.dictKey);
        if (arrIndex > -1) {
          this.lockBrandIsactive.splice(arrIndex, 1);
          this.arr.splice(arrKey, 1);
        } else {
          this.lockBrandIsactive.push(index);
          this.arr.push(e.dictKey);
        }
        if (this.arr.length > 0) {
          this.listSearch.lockBrand = this.arr.join(",");
        }
        // if (index != this.lockBrandIsactive) {
        //   this.lockBrandIsactive = index;
        //   this.listSearch.lockBrand = e.dictKey;
        // } else {
        //   this.lockBrandIsactive = -1;
        //   this.lockBrandIsactive = null;
        //   this.listSearch.lockBrand = "";
        // }
      }
      if (type == "openlock_type") {
        // this.listSearch.openlockType = e.dictKey;
      }
      if (type == "net_app") {
        // this.listSearch.lockBrand = e.dictKey;
      }
      if (type == "mark_time") {
        if (index != this.marketTimeAcitve) {
          this.marketTimeAcitve = index;
          this.listSearch.marketTime = e.dictKey;
        } else {
          this.marketTimeAcitve = -1;
          this.marketTimeAcitve = null;
          this.listSearch.marketTime = "";
        }
      }
      if (type == "place") {
        if (index != this.placeAcitve) {
          this.placeAcitve = index;
          this.listSearch.place = e.dictKey;
        } else {
          this.placeAcitve = -1;
          this.placeAcitve = null;
          this.listSearch.place = "";
        }
      }
      if (type == "made_enterprise") {
        // this.listSearch.lockBrand = e.dictKey;
      }
      if (type == "insert_core_type") {
        // this.listSearch.lockBrand = e.dictKey;
      }
      if (type == "clutch_type") {
        // this.listSearch.lockBrand = e.dictKey;
      }
      if (type == "main_material") {
        // this.listSearch.lockBrand = e.dictKey;
      }
      this.getList();
    },
    getList() {
      const params = {
        ...this.listSearch
      };
      this.$axios
        .$get("/blade-mansion/lockinfo/list", {
          params
        })
        .then(res => {
          if (res.success) {
            this.listData = res.data.records;
            this.total = Number(res.data.total);
          }
        });
    },
    getSearchData(code) {
      const params = {
        code: code
      };
      this.$axios
        .$get("/blade-system/dict-biz/one-child-list", {
          params
        })
        .then(res => {
          if (res.success) {
            if (code === "lock_brand") {
              this.lock_brand = res.data;
            }
            if (code === "openlock_type") {
              this.openlock_type = res.data;
            }
            if (code === "net_app") {
              this.net_app = res.data;
            }
            if (code === "mark_time") {
              this.mark_time = res.data;
            }
            if (code === "place") {
              this.place = res.data;
            }
            if (code === "made_enterprise") {
              this.made_enterprise = res.data;
            }
            if (code === "insert_core_type") {
              this.insert_core_type = res.data;
            }
            if (code === "clutch_type") {
              this.clutch_type = res.data;
            }
            if (code === "main_material") {
              this.main_material = res.data;
            }
          }
        });
    },
    sizeChange(e) {
      this.listSearch.size = e;
      this.getList();
    },
    currentChange(e) {
      this.listSearch.current = e;
      this.getList();
    },
    goToDetail(e) {
      this.$router.push({
        path: "/detailInfo",
        query: {
          id: e.id
        }
      });
    },
    getName(e) {
      var str = "";
      this.lock_brand.forEach(item => {
        if (item.dictKey == e) {
          str = item.dictValue;
        }
      });
      return str;
    },
    getopenlockType(e) {
      var arr = "";
      var arr1 = [];
      if (e) {
        arr = e.split(",");
      }
      for (let i = 0; i < this.openlock_type.length; i++) {
        for (let j = 0; j < arr.length; j++) {
          if (this.openlock_type[i].dictKey == arr[j]) {
            arr1.push(this.openlock_type[i].dictValue);
          }
        }
      }
      if (arr1.length > 0) {
        return (arr1 = arr1.join(" | "));
      } else {
        return "";
      }
    }
  }
};
</script>

<style scoped>
.nav {
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  padding-right: 320px;
  padding-left: 320px;
  display: flex;
  justify-content: flex-end;
  background: #313131;
}

.nav-warp {
  /* width: calc(100% - 565px); */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
}

.btn-left {
  display: flex;
  margin-right: 200px;
  align-items: center;
}
.home {
  font-family: MicrosoftYaHei-Bold;
  width: 135px;
  height: 44px;
  background: #263c92;
  border-radius: 4px;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  /* margin-top: 23px; */
}
.data-serch {
  width: 135px;
  cursor: pointer;
  height: 44px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.to-login {
  width: 135px;
  height: 44px;
  font-family: Microsoft YaHei;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.banner {
  width: 100%;
  height: 230px;
  background: url("../../assets/images/1.png") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-img {
  width: 100%;
  height: 300px;
}
.search {
  width: 788px;
  height: 44px;
  border: 2px solid #263c92;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  background: #263c92;
}

.el-input {
  width: 678px;
  height: 99%;
  border: 0;
  outline: none;
  padding-left: 20px;
  color: #aaaaaa;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}
.button {
  width: 110px;
  height: 100%;
  background: #263c92;
  border-radius: 0px 4px 4px 0px;
  outline: none;
  border: none;
  color: #ffffff;
  font-size: 20px;
}
.classification {
  margin-top: 81px;
  width: 100%;
  height: 100%;
  padding-right: 160px;
  padding-left: 200px;
  box-sizing: border-box;
}
.title {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #222222;
  margin-bottom: 30px;
}
.sub {
  font-size: 16px;
  display: flex;
}
.sub-title {
  width: 80px;
}
.sub-title > p {
  margin-bottom: 24px;
  color: #222;
  cursor: pointer;
}
.arrow {
  margin-right: 32px;
}
.arrow > p {
  margin-bottom: 24px;
}
.cate_detail {
  color: #888;
}
.cate-detail-item {
  margin-bottom: 24px;
}
.cate-detail-item > span {
  margin-right: 20px;
  cursor: pointer;
}
.goods-list {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding-right: 160px;
  padding-left: 200px;
  box-sizing: border-box;
  margin-top: 56px;
}
.goods-warp {
  width: 1300px;
}
.goods-list .item {
  width: 230px;
  min-height: 530px;
  float: left;
  margin-right: 33px;
  box-shadow: 0px 28px 57px 0px rgba(38, 60, 146, 0.19);
  margin-bottom: 40px;
  padding-bottom: 20px;
}
.goods-warp li:nth-child(5n + 5) {
  margin-right: 0;
}
.img {
  height: 278px;
  width: 100%;
}
.label {
  margin: 10px 13px 13px 16px;
}
.goods-list .el-button {
  padding: 5px 13px;
  margin-bottom: 5px;
}
.goods-list .el-button--primary {
  background-color: #263c92;
  border-color: #263c92;
}
.addr {
  display: flex;
  margin-left: 13px;
  margin-bottom: 9px;
  color: #888888;
}
.addr-item {
  flex: 1;
}
.mode {
  color: #888888;
  margin-left: 13px;
  margin-bottom: 18px;
}
.tips {
  margin-left: 13px;
  color: #ff8518;
}
.pagination {
  width: 100%;
  height: 100%;
  padding-right: 160px;
  padding-left: 200px;
  box-sizing: border-box;
  margin-top: 30px;
  overflow: hidden;
  text-align: center;
}
.pagination .el-pagination {
  /* float: right; */
}
.activeCss {
  color: #263c92;
  background: rgba(38, 60, 146, 0.2);
  /* opacity: 0.2; */
  border-radius: 4px;
  padding: 2px 5px;
}
.clearBtn {
  margin-left: 40px;
  border: 1px solid #263c92;
  color: #263c92;
}
.btn-desc{
  display: block;
  margin-left: 0;
}
</style>
